<template>
  <div>
    <el-card>
      <div slot="header">
        <div class="topBox">
          <span>商品分类</span>
          <el-button type="primary" size="mini" @click="showDialog"
            >添加分类</el-button
          >
        </div>
        <div class="card-body">
          <el-table :data="tableData" size="mini">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="分类名称" prop="cateName">
              <template slot-scope="scope">
                <span v-if="!scope.row.canEdit">{{ scope.row.cateName }}</span>
                <el-input v-else v-model="scope.row.cateName"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="是否启用">
              <template slot-scope="scope">
                <el-switch
                  :disabled="scope.row.canEdit ? false : true"
                  size="mini"
                  v-model="scope.row.state"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  :type="scope.row.canEdit ? 'success' : 'primary'"
                  size="small"
                  @click="handle(scope.row)"
                >
                  {{ scope.row.canEdit ? "完成" : "编辑" }}
                </el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog title="添加分类" :visible.sync="dialogVisible" width="400px">
      <el-form label-width="100px">
        <el-form-item label="分类名称">
          <el-input v-model="addCateForm.cateName"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="addCateForm.state"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  $_goods_addcate,
  $_goods_catelist,
  $_goods_editcate,
} from "@/api/goods";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      addCateForm: {
        cateName: "",
        state: true,
      },
      currentPage: 1,
      pageSize: 5,
      total: 0,
    };
  },
  methods: {
    // 打开弹窗
    showDialog() {
      this.dialogVisible = true;
    },
    // 商品添加
    submitAdd() {
      let data = { ...this.addCateForm, state: this.addCateForm.state ? 1 : 0 };
      console.log(data);
      // 发送添加分类的接口
      $_goods_addcate(data).then((res) => {
        console.log(87, res);
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
          this.dialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },
    // 获取数据
    getData() {
      $_goods_catelist({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        this.total = res.data.total;

        res.data.data = res.data.data.map((item) => {
          item.state = item.state == 1 ? true : false;
          item.canEdit = false;
          return item;
        });

        this.tableData = res.data.data;
        console.log(this.tableData);
      });
    },
    // 每一次页码跳转
    currentChange(page) {
      this.currentPage = page;
      this.getData();
    },
    handle(row) {
      // 如果caneit为false，那么要做编辑操作
      // 如果为true，则要去发送请求，更新菜系信息
      if (!row.canEdit) {
        row.canEdit = true;
      } else {
        $_goods_editcate({
          id: row.id,
          cateName: row.cateName,
          state: row.state ? 1 : 0,
        }).then((res) => {
          console.log(148, res);
          row.canEdit = false;
          this.getData();
        });
      }
    },
  },
  // 8+2+1
  created() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.topBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/.el-pagination {
  margin: 20px 0;
}
.el-input {
  width: 200px;
}
</style>